<template>
  <div>
    <div style="text-align:right;margin-bottom: 20px">
      <el-tooltip class="item" effect="dark" content="新增供应商" placement="top">
        <el-button size="small" type="primary" icon="el-icon-plus" @click="handleEdit({}, 'add')" />
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="刷新" placement="top">
        <el-button size="small" @click="handleGetList" icon="el-icon-refresh" />
      </el-tooltip>
    </div>
    <e-table
      :tableData="tableData"
      :columns="columns"
      :loading="loading"
      :total="total"
      @getList="handleGetList"
    >
      <el-table-column
        slot="order"
        label="#"
        type="index"
        :index="indexMethod"
        width="50"
        align="center"
      />
      <el-table-column show-overflow-tooltip slot="info" align="center" label="供应商">
        <template slot-scope="scope">
          <detail-button class="fl" :record="scope.row">{{ scope.row.supplierName }}</detail-button>
        </template>
      </el-table-column>
      <el-table-column slot="image" label="营业执照" width="80" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            v-if="scope.row.businessLicense"
            @click="handlePreview(scope.row)"
          >已上传</el-button>
          <span v-else>未上传</span>
        </template>
      </el-table-column>

      <el-table-column slot="state" label="状态" width="80" align="center">
        <template slot-scope="scope">
          <el-tag :type="judgeColor(scope.row.entryState)">{{ judgeState(scope.row.entryState) }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column slot="action" fixed="right" label="操作" width="50" align="center">
        <template slot-scope="scope">
          <el-dropdown>
            <a class="el-dropdown-link">
              <i class="el-icon-menu"></i>
            </a>
            <el-dropdown-menu slot="dropdown">
              <template v-if="scope.row.entryState === 0">
                <el-dropdown-item @click.native="handleEdit(scope.row, 'change')">
                  <a href="javascript:;">供应商变更</a>
                </el-dropdown-item>
                <el-dropdown-item @click.native="handleEdit(scope.row, 'addType')">
                  <a href="javascript:;">新增供应商类型</a>
                </el-dropdown-item>
              </template>
              <el-dropdown-item @click.native="handleEdit(scope.row, 'edit')">
                <a href="javascript:;">编辑</a>
              </el-dropdown-item>
              <template v-if="scope.row.entryState === 3">
                <el-dropdown-item @click.native="$emit('view', scope.row)">
                  <a href="javascript:;">重新申请准入</a>
                </el-dropdown-item>
              </template>
              <!-- <el-dropdown-item>
                <a href="javascript:;" @click="handleEdit(scope.row, 'edit')">编辑</a>
              </el-dropdown-item>-->
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <!-- <el-table-column slot="action" label="操作" align="center" fixed="right" width="120">
        <template slot-scope="scope">
          <a @click="handleEdit(scope.row, true)">编辑</a>
          <el-divider direction="vertical" />
          <el-dropdown>
            <a class="el-dropdown-link">
              更多
              <i class="el-icon-arrow-down el-icon--right"></i>
            </a>
            <el-dropdown-menu slot="dropdown">
              <template v-if="scope.row.entryState === 0">
                <el-dropdown-item>
                  <a href="javascript:;" @click="handleEdit(scope.row, 'change')">供应商变更</a>
                </el-dropdown-item>
                <el-dropdown-item>
                  <a href="javascript:;" @click="handleEdit(scope.row, 'addType')">新增供应商类型</a>
                </el-dropdown-item>
              </template>
              <el-dropdown-item>
                <a href="javascript:;" @click="handleEdit(scope.row, 'edit')">编辑</a>
              </el-dropdown-item>
              <template v-if="scope.row.entryState === 3">
                <el-dropdown-item>
                  <a href="javascript:;" @click="$emit('view', scope.row)">重新申请准入</a>
                </el-dropdown-item>
              </template>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>-->
    </e-table>
    <preview-modal ref="previewModal" />
  </div>
</template>

<script>
import { supplierInfoList, getOneUrl } from '@/api/supplier'
import { judgeColor, judgeState } from '@/utils/util'
import DetailButton from '@/components/DetailButton'
import PreviewModal from '@/components/PreviewModal'

export default {
  components: {
    DetailButton,
    PreviewModal
  },
  data() {
    return {
      queryParam: {
        pageNo: 1,
        pageSize: 10
      },
      loading: false,
      // 表头
      columns: [
        { slot: 'order' },
        { slot: 'info' },
        {
          label: '编码',
          prop: 'supplierCode',
          width: '120px'
        },
        {
          label: '类型',
          width: '100px',
          prop: 'supplierTypeName'
        },
        {
          label: '性质',
          width: '120px',
          prop: 'supplierNatureName'
        },
        {
          label: '所属行业',
          width: '150px',
          prop: 'supplierIndustryName'
        },
        { slot: 'image' },
        { slot: 'state' },
        { slot: 'action' }
      ],
      tableData: [],
      total: 1
    }
  },
  mounted() {
    this.handleGetList()
  },
  methods: {
    indexMethod(index) {
      return (this.queryParam.pageNo - 1) * this.queryParam.pageSize + index + 1
    },
    judgeState(state) {
      return judgeState(state)
    },
    judgeColor(state) {
      return judgeColor(state)
    },
    handlePreview(record) {
      this.$refs.previewModal.show([record.savePath])
    },
    handleChange(record, type) {
      this.$router.push({
        name: 'supplierEdit',
        params: { obj: record, type }
      })
    },
    handleEdit(row, type) {
      this.$router.push({
        name: 'supplierEdit',
        params: { obj: row, type }
      })
    },
    handleDetail(record) {
      this.$router.push({
        name: 'supplierDetailBasic',
        params: { obj: record, from: 'supplier' }
      })
    },
    async handleGetList(param = {}) {
      this.loading = true
      this.queryParam = Object.assign(this.queryParam, param)
      const res = await supplierInfoList(this.queryParam)
      if (res.data && res.data.records.length > 0) {
        const {
          state,
          data: { records, total }
        } = res
        this.tableData = records
        this.total = total
      } else {
        this.tableData = []
        this.total = 1
      }
      this.loading = false
    }
  }
}
</script>
